import {Button, ConfigProvider, Form, Image, Input, Space, Tabs, TabsProps, theme} from "antd";
import {useState} from "react";
import LoginImage from '/images/login-image.png';
import {LockOutlined, MailTwoTone, UserOutlined} from "@ant-design/icons";
import {ProForm, ProFormCaptcha} from "@ant-design/pro-components";
import {useLocation, useNavigate, useParams, useSearchParams} from "react-router-dom";
import {captchaImage, login} from "@/services/api/common";
import {setRefreshToken, setToken} from "@/utils/tokenCookies";

export default function Login() {
	let [searchParams, setSearchParams] = useSearchParams()
	let navigate=useNavigate();
	const [form] = Form.useForm();
	const [proForm] = ProForm.useForm();
	const [loading, setLoading] = useState(false);
	const [loginType, setLoginType] = useState(true)
	const  handleLogin =async () => {
		setLoading(true);
		//账号密码登录
		if(loginType){
			let loginFrom=form.getFieldsValue(["userName",'passWord'])
			/*let res=await login({
				loginType:1,
				...loginFrom
			})
			setToken(res.token);*/
			//setRefreshToken(res.refreshToken);
		}else {
			//手机号登录
			let proLoginFrom=proForm.getFieldsValue(["phoneNumber","captcha"])
			console.log('proLoginFrom', proLoginFrom)
		}
		setLoading(false);
		let redirect=searchParams.get("redirect");
		if(redirect){
			navigate(redirect)
		}else {
			navigate("/layout/testA")
		}
	};
	return (
		<>
			<div style={{
				backgroundImage:`url(${LoginImage})`,
				backgroundSize:'cover',
				display:"inline-block",
				width:'100%',
				height:'100%',
			}}>
				<div
					 style={{
						display:"inline-block",
						width:400,
						height:600,
						position: 'absolute',
						left:"50%",
						top:"50%",
						transform:'translate(-50%,-50%)'
					}}
				>
					<Space style={{marginLeft:85,marginTop:8}} align={'center'} size={38}>
						<Image
							width={66}
							src={'/images/android.png'}
						/>
						<h1 className={"login-title"}>JIN-YU</h1>
					</Space>
					<Tabs centered={true}
						  onChange={()=>{
							  if(loginType) {
								  form.resetFields(["userName",'passWord'])
							  }else {
								  proForm.resetFields(["phoneNumber","captcha"])
							  }
							  setLoginType(!loginType)
						  }}
						items={[
						{
							key: 'account',
							label: '账号密码登录',
							children:(<div>
								<Form style={{marginTop:20}} form={form} onFinish={handleLogin}>
									<Form.Item
										name="userName"
										rules={[{ required: true, message: '请输入用户名' }]}
									>
										<Input prefix={<UserOutlined />} placeholder="用户名" />
									</Form.Item>
									<Form.Item
										name="passWord"
										rules={[{ required: true, message: '请输入密码' }]}
									>
										<Input.Password prefix={<LockOutlined />} placeholder="密码" />
									</Form.Item>
									<Form.Item >
										<Button style={{backgroundColor:'#bfa',marginTop:49,width:'100%'}}
												className={"global-center"}
												 htmlType="submit" loading={loading}
										>
											登录
										</Button>
									</Form.Item>
								</Form>
							</div>)

						},
						{
							key: 'captcha',
							label:"手机号登录",
							children: (
								<div><ProForm style={{marginTop:20}} form={proForm}
											  autoFocusFirstInput
											  isKeyPressSubmit
											  submitter={false}
											  //执行登录异步函数
											  onFinish={async (values) => {
												await handleLogin();
											}}
								>
									<ProForm.Item
										name="phoneNumber"
										rules={[{ required: true, message: '请输入手机号' }]}
									>
										<Input prefix={<UserOutlined />} placeholder="手机号" />
									</ProForm.Item>
									<ProForm.Item
										name='captcha'
										rules={[{required:true,message:'请输入验证码'}]}
									>
										<ProFormCaptcha
											fieldProps={{
												prefix: <MailTwoTone />,
												placeholder:'请输入验证码'
											}}
											//https://www.tailwindcss.cn/docs/background-color 样式
											captchaProps={{className:'bg-white',
															loading:false
											}}
											countDown={2}
											//自动注入手机号
											phoneName={'phoneNumber'}
											onGetCaptcha={(phone) => {
												console.log('phone', phone)
												//获取验证码
												return new Promise((resolve, reject) => {
													return resolve;
												});
											}}
										/>
									</ProForm.Item>
									<ProForm.Item >
										{/*触发表单提交事件*/}
										<Button style={{backgroundColor:'#bfa',marginTop:25,width:'100%'}}
												className={"global-center"}
												 htmlType="submit" loading={loading}>
											登录
										</Button>
									</ProForm.Item>
								</ProForm></div>
							)
						}
					]}>
					</Tabs>
				</div>
			</div>
		</>
	)
}